<template>
  <div class="dashboard">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <template #title>
            <span><user-outlined /> 用户总数</span>
          </template>
          <p class="card-value">1,286</p>
          <p class="card-footer">
            <span class="up"><arrow-up-outlined /> 12% </span>较上周
          </p>
        </a-card>
      </a-col>
      
      <a-col :span="6">
        <a-card>
          <template #title>
            <span><shopping-outlined /> 订单总数</span>
          </template>
          <p class="card-value">4,389</p>
          <p class="card-footer">
            <span class="up"><arrow-up-outlined /> 8% </span>较上周
          </p>
        </a-card>
      </a-col>
      
      <a-col :span="6">
        <a-card>
          <template #title>
            <span><dollar-outlined /> 销售额</span>
          </template>
          <p class="card-value">¥126,560</p>
          <p class="card-footer">
            <span class="up"><arrow-up-outlined /> 15% </span>较上周
          </p>
        </a-card>
      </a-col>
      
      <a-col :span="6">
        <a-card>
          <template #title>
            <span><info-circle-outlined /> 访问量</span>
          </template>
          <p class="card-value">12,836</p>
          <p class="card-footer">
            <span class="down"><arrow-down-outlined /> 3% </span>较上周
          </p>
        </a-card>
      </a-col>
    </a-row>
    
    <a-row :gutter="16" style="margin-top: 20px">
      <a-col :span="16">
        <a-card title="销售趋势">
          <div style="height: 300px; display: flex; justify-content: center; align-items: center;">
            这里放图表组件（实际项目可使用 ECharts 等）
          </div>
        </a-card>
      </a-col>
      
      <a-col :span="8">
        <a-card title="最近活动">
          <a-list size="small" :data-source="activities" :pagination="false">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>{{ item.title }}</template>
                  <template #description>{{ item.time }}</template>
                  <template #avatar>
                    <a-avatar :style="{ backgroundColor: item.color }">
                      {{ item.avatar }}
                    </a-avatar>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { 
  UserOutlined, 
  ShoppingOutlined, 
  DollarOutlined, 
  InfoCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined
} from '@ant-design/icons-vue';
import { ref } from 'vue';

const activities = ref([
  { 
    title: '李明新增了一张销售单', 
    time: '2分钟前', 
    avatar: '李',
    color: '#1890ff' 
  },
  { 
    title: '张华更新了用户信息', 
    time: '1小时前', 
    avatar: '张',
    color: '#52c41a' 
  },
  { 
    title: '系统自动备份数据', 
    time: '3小时前', 
    avatar: '系',
    color: '#faad14' 
  },
  { 
    title: '王美登录了系统', 
    time: '1天前', 
    avatar: '王',
    color: '#eb2f96' 
  },
]);
</script>

<style scoped>
.dashboard {
  padding: 20px;
  height: 100%;
  overflow: auto;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1;
}

.card-footer {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.up {
  color: #52c41a;
}

.down {
  color: #f5222d;
}
</style> 